<template>
	<div id="wode">
		<!--头部-->
		<div class="wode_top">
			<span class="iconfont icon-lingdang"></span>
		</div>
		<!--flex-->
		<div class="wode_bottom">
			<!--登录-->
			<div class="_bottom_1">
				<img src="../assets/img/to.png" alt="">
				<router-link to="/login">
					<span>{{denglu}}</span>
				</router-link>
				
				<i>></i>
			</div>
			<!--定位-->
			<div class="ding">
				<div class="ding1">
					<div class="ding1_1">
						<span>
							我的订单
						</span>
						<p>
							全部订单&nbsp;>
						</p>
					</div>
					<div class="ding1_2">
						<dl>
							<dd>
								<img src="../assets/img/fk.jpg" alt="">
							</dd>
							<dt>待付款</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/fk.jpg" alt="">
							</dd>
							<dt>待付款</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/fk.jpg" alt="">
							</dd>
							<dt>待付款</dt>
						</dl>
						<dl>
							<dd>
								<img src="../assets/img/fk.jpg" alt="">
							</dd>
							<dt>待付款</dt>
						</dl>
					</div>
				</div>
				<div class="ding2">
					专属推荐
				</div>
				<div class="ding3">
					<dl>
						<dd>
							<img src="" alt="">
							
						</dd>
						<dt>
							
						</dt>
					</dl>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
	export default {
		async mounted(){
			var {data} = await this.$axios.get("http://localhost:53000/home");
			this.arr = data;
		},
		computed:{
		 	...mapState({
		 		denglu : (state,getters)=>{
		 			 
		 			 return state.rng.denglu;
		 		 }
		 	 })
		 	 
		},
		mounted(){
			// if(this.denglu !== "请登录"){
			// 	this.$router.push('/')
			// }
		},
		created() {
			var myA = JSON.parse(localStorage.getItem("reg") || {"key":"value"});
			for(var myB in myA){
				
			}
		}	
	}
</script>

<style lang="scss">
	*{
		box-sizing: border-box;
	}
	#wode{
		height: 100%;
		display: flex;
		flex-direction: column;
		.wode_top{
			height: 1.3rem;
			background: #eecb79;
			padding-top: 0.5rem;
			span{
				margin-left: 92%;
				color:white;
			}
		}
		.wode_bottom{
			flex: 1;
			overflow: auto;
			background: #f4f4f4;
			color: white;
			._bottom_1{
				height: 3.6rem;
				background:#eecb79;
				display: flex;
				padding: 0 0.3rem;
				align-items: center;
				img{
					width: 1.8rem;
					height: 1.8rem;
					margin-right: 0.5rem;
				}
				span{
					margin-right:6.2rem ;
				}
			}
			.ding{
				//height: 100%;
				padding: 0 0.3rem;
				background:#f4f4f4;
				position:relative;
				.ding1{
					height: 4.1rem;
					position: relative;
					top:-0.9rem;
					background: white;
					border-radius: 0.3rem;
					.ding1_1{
						height: 1.1rem;
						border-bottom: 1px solid #fbfbfb;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 0.3rem;
					}
					.ding1_2{
						width: 100%;
						height: 2.9rem;
						background: white;
						display: flex;
						dl{
							width: 25%;
							height: 100%;
							background: white;
							dd{
								width: 100%;
								height: 1.6rem;
								position: relative;
								img{
									width: 0.8rem;
									height: 0.8rem;
									position: absolute;
									left: 0;
									right: 0;
									top: 0;
									bottom: 0;
									margin: auto;
								}
							}
							dt{
								width:100%;
								height: 1.16rem;
								text-align: center;
								line-height: 1rem;
								color:#000000;
							}
						}
					}
				}
				.ding2{
					height: 1.3rem;
					color: #000000;
					font-weight: 900;
				}
				.ding3{
					min-height: 7.62rem;
					display: flex;
					flex-wrap: wrap;
					
				}
			}
		}
	}
</style>
